<!-- informationNeed.vue -->
<template>
	<view class="nav">
	  <!-- 顶部导航 -->
		<toptab-bar></toptab-bar>
		<information-header-vue></information-header-vue>
		<view class="content">
		  <view class="layout">
		    <view 
		      class="box" 
		      v-for="item in SourceNeed" 
		      :key="item.news_id"
			  @click="handleBoxClick(item)"
		    >
		      <view class="text">
		        <view class="title" >{{ item.news_title }}</view> 
		        <view class="s-type">
		          <text style="font-size: 24rpx;">{{ item.news_type }}</text>
		          <text style="font-size: 24rpx;">{{ formatDate(Date.now()) }} 发布</text>
		        </view>
		      </view>
		      
		      <!-- 图标区域 -->
		      <view class="allIcon">
		        <view
		          class="icon"
		          v-for="icon in AllIcons.icons" 
		          :key="icon.id"
				   @click.stop="handleIconClick(icon.type, item)"
		        >
		          <image 
				  :src="icon.src"
				   mode="widthFix"
				   :class="{
				       'active': 
				         (icon.type === 'like' && item.is_liked === '1') || 
				         (icon.type === 'subscribe' && item.is_subscribe === '1')
				     }"
				   ></image>
		          <!-- 根据图标类型动态绑定对应的数据 -->
		          <text class="icon-text">
		            {{
		              icon.type === "click" ? item.statistics.clicked_num :
		              icon.type === "like" ? item.statistics.liked_num :
		              icon.type === "comment" ? item.statistics.comment_num :
		              icon.type === "subscribe" ? item.statistics.subscribe_num :
		              item.statistics.shared_num
		            }}
		          </text>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
	
	
</template>

<script setup>
	import { reactive,ref,onMounted } from 'vue';
	
	import toptabBar from '@/pages/index/toptabbar/tabbar.vue';
	import informationHeaderVue from '../../../components/information/informationHeader.vue';
	import decInformationApi from '../../../api/dec/decIndex/decInformationApi';
	const SourceNeed = ref([])
	const AllIcons = reactive({
	  icons: [
	      { id: 1, src: "/static/information/view.png", type: "click" },
	      { id: 2, src: "/static/information/like.png", type: "like" },
	      { id: 3, src: "/static/information/comment.png", type: "comment" },
	      { id: 4, src: "/static/information/subscribe.png", type: "subscribe" },
	      { id: 5, src: "/static/information/share.png", type: "share" }
	    
	  ],
	 
	});
	//获取资源需求
	const fetchSource = async () =>{
		try{
			let params = {
				section:888,
				club_id:2810
			};
			 
			 const res = await decInformationApi.GF_get_news_API(params);
			 
			
			if(res.error === 0){
				SourceNeed.value = res.datas
				
			}
		}catch(err){
			console.error('获取资源需求失败：',err)
		}
		
	}
	
	
	
	const handleBoxClick = (item) =>{
		uni.navigateTo({
			 url: `/pages/index/information/infoDetails/detailSource?id=${item.news_id}`
		})
	}
	
	onMounted(() => {
		fetchSource();
	})
	
	// 处理图标点击
		const handleIconClick = (type, item) => {
		  if (type === 'like') {
		    item.is_liked = item.is_liked === "1" ? "0" : "1";
		    if (item.is_liked === "1") {
		      item.statistics.liked_num++;
		    } else {
		      item.statistics.liked_num--;
		    }
		  } else if (type === 'subscribe') {
		    item.is_subscribe = item.is_subscribe === "1" ? "0" : "1";
		    if (item.is_subscribe === "1") {
		      item.statistics.subscribe_num++;
		    } else {
		      item.statistics.subscribe_num--;
		    }
		  }
		};
	// 格式化日期
	const formatDate = (timestamp) => {
	  const date = new Date(timestamp);
	  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
	};
</script>

<style lang="scss" scoped>
.content {
  background-color: #f7f7f9;
  // background-color: #fff;
  .layout {
		
    .box {
      background-color: #fff;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
	  margin-bottom: 12rpx;
      .text {
        padding: 28rpx;
		.title{
			font-size: 32rpx; 
			font-weight: 700;
			
		}
        .s-type {
          display: flex;
		  flex-direction: column;
          margin-top: 12rpx;
          gap: 10rpx; // 设置文字之间的间距
		  color: #4f4f4f;
        }
      }
      .allIcon {
        display: flex;
        justify-content: space-between; // 图标之间均匀分布
        // margin: 28rpx 0rpx;
        align-items: center; // 垂直居中对齐
        padding: 0rpx 28rpx;
		padding-bottom: 58rpx;
        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10rpx; // 图标和文字之间的间距
		  margin-right: 58rpx;
          image {
            width: 30rpx;
            height: 30rpx;
			&.active {
			  filter: brightness(0) saturate(100%) invert(44%) sepia(98%) saturate(1239%) hue-rotate(353deg) brightness(98%) contrast(101%);
			  // // /* 或者直接修改颜色（如果图片是 SVG） */
			  // fill: #FA6409;
			}
          }

          .icon-text {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
